<script setup lang="ts">
// import { Button as VanButton } from 'vant'
// import { ref, shallowRef } from 'vue'
// import CpNavBar from './components/cp-nav-bar.vue'
// import Home from './components/home.vue'
// import Login from './components/login.vue'
// import User from './components/user.vue'

// const routes = [
//   { path: '/home', component: Home },
//   { path: '/login', component: Login },
//   { path: '/user', component: User },
// ]
// const current = shallowRef()
// // const current = ref()
// // 不使用 ref 因为会给对象下所有的属性加数据劫持
// // 使用 shallowRef() 之后给对象的第一层加数据劫持
// const push = (url: string) => {
//   console.log(url)
//   // 路径变化，使用history改变浏览器地址栏地址（不会发送请求）
//   history.pushState(null, '', url)
//   // 切换组件
//   current.value = routes.find((item) => item.path === url)?.component
// }
// // 监听 history 的前进后退
// window.onpopstate = () => {
//   // location.pathname 拿到当前的url地址
//   current.value = routes.find(
//     (item) => item.path === location.pathname
//   )?.component
// }
</script>

<template>
  <!-- <van-button type="primary" @click="push('/home')">首页</van-button>
            <van-button type="primary" @click="push('/login')">登录</van-button>
            <van-button type="primary" @click="push('/user')">个人中心</van-button>
            <component :is="current"></component> -->
  <router-view></router-view>
</template>

<style scoped lang="scss"></style>
